<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :expand-row-keys="expandKeyList"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="code" label="权限值"> </el-table-column>
      <el-table-column prop="toCode" label="跳转权限值"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            :disabled="row.level == 4"
            @click="
              showDialog({
                id: 0,
                type: row.level,
                level: row.level,
                name: '',
                code: '',
                toCode: '',
                pid: row.id
              })
            "
          ></el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit-outline"
            @click="showDialog(row)"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="deletePer(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加和修改的Dialog -->
    <el-dialog
      title="修改菜单"
      :visible="isDialogForm"
      :before-close="closeDialog"
    >
      <el-form label-width="120px">
        <el-form-item label="名称">
          <el-input autocomplete="off" v-model="saveForm.name"></el-input>
        </el-form-item>
        <el-form-item label="功能权限值">
          <el-input autocomplete="off" v-model="saveForm.code"></el-input>
        </el-form-item>
        <el-form-item label="路由跳转权限值" v-show="isToCode">
          <el-input autocomplete="off" v-model="saveForm.toCode"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isDialogForm = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  deletePermissionApi,
  getPermissionListApi,
  savePermissionApi,
  updatePermissionApi
} from "@/api/acl/permission";

export default {
  name: "Permission",
  data() {
    return {
      // 定义数据
      tableData: [],
      // 默认展开的数据
      expandKeyList: ["1"],

      // 定义添加和删除的Dialog显示的标识
      isDialogForm: false,

      // 定义添加和修改的数据
      saveForm: {
        type: 1,
        level: 1,
        name: "",
        code: "",
        toCode: "",
        pid: ""
      },

      // dialog的路由跳转权限值显示的标识
      isToCode: false
    };
  },
  methods: {
    // 删除
    async deletePer(id) {
      this.$confirm("确定要删除此菜单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await deletePermissionApi(id);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.getList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 关闭Dialog
    closeDialog() {
      this.isDialogForm = false;
    },
    // 显示添加和修改的Dialog
    showDialog(per) {
      // const showTocode = false;
      console.log(per);
      if (per.level === 4) {
        this.isToCode = true;
      } else if (per.level === 3 && per.id === 0) {
        this.isToCode = true;
        console.log(per.level === 3 && per.id === 0);
      } else {
        this.isToCode = false;
      }
      this.isDialogForm = true;
      this.saveForm = per;
      console.log(this.saveForm);
    },
    // 添加和修改的确定按钮的事件
    async saveOrUpdate() {
      // 通过id判断是添加还是修改
      if (this.saveForm.id) {
        // 发送修改请求
        await updatePermissionApi({
          type: this.saveForm.type,
          level: this.saveForm.level,
          name: this.saveForm.name,
          code: this.saveForm.code,
          toCode: this.saveForm.toCode,
          pid: this.saveForm.pid
        });
        console.log(this.saveForm);
        // 重新请求
        this.getList();
        // 提示
        this.$message.success("修改成功");
        // 关闭Dialog
        this.isDialogForm = false;
      } else {
        // 修改saveForm的level和type的值
        this.saveForm.level = this.saveForm.level + 1;
        this.saveForm.type = this.saveForm.level === 4 ? 2 : 1;
        // 发送请求
        // await savePermissionApi(this.saveForm);
        await savePermissionApi({
          type: this.saveForm.type,
          level: this.saveForm.level,
          name: this.saveForm.name,
          code: this.saveForm.code,
          toCode: this.saveForm.toCode,
          pid: this.saveForm.pid
        });
        console.log(this.saveForm);

        // 重新请求
        this.getList();
        // 提示
        this.$message.success("添加成功");
        // 关闭Dialog
        this.isDialogForm = false;
      }
    },
    // 发起数据请求
    async getList() {
      const result = await getPermissionListApi();
      console.log(result);
      this.tableData = result.data.children;
      this.getchildrenone();
    },
    // 提取第一层的key
    getchildrenone() {
      // 通过遍历第二层的数据提取出id
      this.tableData[0].children.forEach(item => {
        if (item.level === 1) {
          this.expandKeyList.push(item.id);
        }
      });
    }
  },
  /* 初始化 */
  mounted() {
    this.getList();
  }
};
</script>
<style></style>
